<template>
  <main>
    <BasicModal
      :maxHeight="560"
      :width="width"
      @register="registerModal"
      :showCancelBtn="tabValue == 'risk'"
      :showOkBtn="tabValue == 'risk'"
      @ok="handleSubmit"
      wrapClassName="modal-radio-capsule"
      :okText="$t('common.okText')"
      :cancelText="$t('common.cancelText')"
    >
      <template #title>
        <RadioGroup v-model:value="tabValue" @change="handleClickButton" class="radio-capsule">
          <RadioButton value="monitor"> {{ $t('table.risk.report_monitor_data') }} </RadioButton>
          <RadioButton value="risk"> {{ tabTitle }} </RadioButton>
        </RadioGroup>
      </template>

      <template v-if="tabValue == 'monitor'">
        <BasicForm @register="monitorRegisterForm" v-if="tabValue == 'monitor'">
          <template #validBet="{ model, field }">
            <Input :value="filterNumber(model[field])" :controls="false" disabled>
              <template
                #addonAfter
                v-if="
                  risk_code == 'low_multiple_bet' ||
                  risk_code == 'high_multiple_prizes' ||
                  risk_code == 'mutual_bet' ||
                  risk_code == 'win_top'
                "
              >
                <cdIconCurrency :icon="'USDT'" class="w-20px mr-3px currency-icon" /><span
                  >USDT</span
                >
              </template>
            </Input>
          </template>
        </BasicForm>
      </template>
      <template v-if="tabValue == 'risk'">
        <BasicForm @register="riskRegisterForm" v-if="tabValue == 'risk'">
          <template #remind>
            <RadioGroup v-model:value="riskState" :options="optionsList" />
          </template>
          <template #time="{ model, field }">
            <FormItem
              v-if="riskState === 1"
              class="risk_time_interval"
              :labelCol="{ style: { width: '83px' } }"
              :label="t('modalForm.risk.risk_time_interval') + ':'"
            >
              <InputNumber
                v-model:value="setTime"
                :controls="false"
                :placeholder="$t('modalForm.risk.risk_time_interval_tip')"
              >
                <template #addonAfter>
                  <span>S</span>
                </template>
              </InputNumber>
            </FormItem>
          </template>
        </BasicForm>
      </template>
    </BasicModal>
  </main>
</template>
<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import {
    InputNumber,
    message,
    Input,
    RadioGroup,
    RadioButton,
    Radio,
    FormItem,
  } from 'ant-design-vue';
  import { getschemasMonitorFun, schemasRisk } from './parameterMonitoringModal.data';
  import { useFormSetting } from '/@/hooks/setting/useFormSetting';
  import {
    updateRiskConfig,
    getRiskWinConfig,
    getRiskLowConfig,
    getRiskHighConfig,
    getRiskMutualConfig,
    getRiskLinkedConfig,
  } from '/@/api/risk';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useAutoLabelWidth } from '/@/components/Form/src/hooks/useForm';
  import cdIconCurrency from '/@/components-cd/Icon/currency/cd-icon-currency.vue';

  const { t } = useI18n();
  const schemas = ref<any>([]);
  const risk_code = ref<string>('');
  const FORM_SIZE = useFormSetting().getFormSize;
  const tabValue = ref('monitor' as string);
  const tabTitle = ref('提醒间隔' as string);
  const width = ref(750 as number);
  const riskState = ref(1 as any);
  const setTime = ref(null as any);
  const optionsList = ref([
    {
      label: t('business.common_on'), //开启
      value: 1,
    },
    {
      label: t('business.common_off'), //关闭
      value: 2,
    },
  ] as any);
  const [monitorRegisterForm, { resetSchema, resetFields, setFieldsValue, reload }] = useForm({
    showActionButtonGroup: false,
    size: FORM_SIZE,
    schemas: schemas.value,
  });
  const [riskRegisterForm, { validate }] = useForm({
    showActionButtonGroup: false,
    size: FORM_SIZE,
    schemas: schemasRisk,
  });
  const _data = ref(null as any);
  const riskRequestObj = {
    win_top: getRiskWinConfig,
    low_multiple_bet: getRiskLowConfig,
    high_multiple_prizes: getRiskHighConfig,
    mutual_bet: getRiskMutualConfig,
    linked_records: getRiskLinkedConfig,
  };
  const [registerModal, { setModalProps, closeModal }] = useModalInner(
    async (data: { risk_code: string }) => {
      risk_code.value = data.risk_code;
      schemas.value = getschemasMonitorFun(data.risk_code);
      _data.value = data;
      if (
        data.risk_code == 'low_multiple_bet' ||
        data.risk_code == 'high_multiple_prizes' ||
        data.risk_code == 'win_top' ||
        data.risk_code == 'mutual_bet' ||
        data.risk_code == 'linked_records'
      ) {
        tabTitle.value = t('modalForm.risk.risk_warn'); //风控提醒
        width.value = 560;
      }

      const { config, remind, interval } = await riskRequestObj[data.risk_code]();
      resetSchema(schemas.value);
      useAutoLabelWidth(schemas.value);
      const configObj = JSON.parse(config);
      if (data.risk_code == 'win_top') configObj.profit_rate = `${configObj.profit_rate}%`;
      else if (data.risk_code == 'low_multiple_bet')
        configObj.bet_multiple = `${configObj.bet_multiple} ${t('modalForm.risk.risk_times')}`; //倍
      else if (data.risk_code == 'high_multiple_prizes')
        configObj.multiple = `${configObj.multiple} ${t('modalForm.risk.risk_times')}`; //倍
      else if (data.risk_code == 'mutual_bet') configObj.bet_count = `${configObj.bet_count} 笔`; //笔
      setFieldsValue(configObj);
      riskState.value = remind;
      setTime.value = interval;
    },
  );

  function tabChange(key) {
    tabValue.value = key;
  }

  async function handleClickButton(e) {
    tabValue.value = e.target.value;
    const { config, remind, interval } = await riskRequestObj[risk_code.value]();

    let data = _data.value;
    resetSchema(schemas.value);
    useAutoLabelWidth(schemas.value);
    const configObj = JSON.parse(config);
    if (data.risk_code == 'win_top') configObj.profit_rate = `${configObj.profit_rate}%`;
    else if (data.risk_code == 'low_multiple_bet')
      configObj.bet_multiple = `${configObj.bet_multiple} ${t('modalForm.risk.risk_times')}`; //倍
    else if (data.risk_code == 'high_multiple_prizes')
      configObj.multiple = `${configObj.multiple} ${t('modalForm.risk.risk_times')}`; //倍
    else if (data.risk_code == 'mutual_bet') configObj.bet_count = `${configObj.bet_count} 笔`; //笔
    setFieldsValue(configObj);
    if (riskState.value == 2) {
      document.getElementsByClassName('risk_time_interval')[0].style.display = 'none';
    }
  }

  async function handleSubmit() {
    try {
      const values = await validate();
      values['remind'] = riskState.value;
      values['interval'] = setTime.value;
      values['risk_code'] = risk_code.value;
      setModalProps({ confirmLoading: true });
      const { status, data } = await updateRiskConfig(values);
      if (status) {
        message.success(data);
        closeModal();
      } else {
        message.error(data);
      }
    } catch (error) {
      console.log(error);
    } finally {
      setModalProps({ confirmLoading: false });
    }
  }
  function filterNumber(num) {
    if (num) {
      var result = num.toString().indexOf('.');
      if (result != -1) {
        return num;
      } else {
        return `${num}.00`;
      }
    }
    return 0;
  }
  watch(
    () => riskState.value,
    (value) => {
      if (value == 2) {
        document.getElementsByClassName('risk_time_interval')[0].style.display = 'none';
      } else {
        document.getElementsByClassName('risk_time_interval')[0].style.display = 'block';
      }
    },
  );
</script>
<style lang="less" scoped>
  ::v-deep(.ant-input-number-input) {
    padding: 19px 10px;
  }

  ::v-deep(.ant-input-group .ant-input) {
    padding: 8px 10px;
  }

  .currency-icon {
    margin-top: -3px;
  }

  //.capsule_tap {
  //  border:1px solid red!important;
  //  ::v-deep(.ant-row) {
  //    display:none;
  //    border:1px solid blue!important;
  //  }
  //}
</style>
